Pitfall 2: Not using (or ignoring) the ESLint plugin

https://www.npmjs.com/package/eslint-plugin-react-hooks

// react-hooks/rules-of-hooks
import React from 'react'

function Foo({bar}) {
  if (bar) {
    React.useEffect() // <-- that's an error
    // React Hook "React.useEffect" is called conditionally. React Hooks must be
    // called in the exact same order in every component render.
  }
}

// react-hooks/exhaustive-deps
import React from 'react'

function Foo({bar}) {
  React.useEffect(() => {
    bar(123)
  }, []) // <-- that's an error
  // React Hook React.useEffect has a missing dependency: 'bar'. Either include
  // it or remove the dependency array. If 'bar' changes too often, find the
  // parent component that defines it and wrap that definition in useCallback.
}

Install, use, and follow the ESLint plugin 👨‍🏫